<!-- 证书对接-商务对接 -->
<template>
    <div class="certificate">
        <div class="cp-container bgf">
            <div v-if="false" class="bnr"></div>
            <search-form
                ref="searchForm"
                type="d"
                :sort-info="sortInfo"
                :default-class-tree="classList"
                :class-conf="classConf"
            >
            </search-form>
        </div>
        <div class="cp-container bgf p20" v-if="false">
            <div v-loading="loading">
                <el-row :gutter="20">
                    <el-col v-for="(item, index) in list" :key="index" :span="8">
                        <section class="pannel">
                            <section class="cert-item flex flex-column">
                                <div class="c-header flex">
                                    <span>{{item.hours}}小时前</span>
                                    <span>剩余{{item.day}}天</span>
                                    <span class="join">{{item.joinNum}}人参与</span>
                                </div>
                                <div class="title">
                                    {{FILTER_FORMATER.wordNum(item.title, 14)}}
                                </div>
                                <div class="desc">
                                    {{FILTER_FORMATER.wordNum(item.desc, 36)}}
                                </div>
                                <div class="price flex flex-between">
                                    <p class="money">{{item.money}}</p>
                                    <p class="city">{{item.city}}</p>
                                </div>
                                <div class="btn-wrapper flex flex-between">
                                    <div class="consult flex">立即咨询</div>
                                    <div class="big-offer flex">我要报价</div>
                                </div>
                            </section>
                            <div class="company flex">{{item.company}}</div>
                        </section>

                    </el-col>
                </el-row>
            </div>
        </div>
        <div class="cp-container bgf flex flex-center">
            <img src="/img/institute/qual/example.png" alt="">
        </div>
    </div>
</template>

<script lang="ts">
import {Component, Vue} from 'nuxt-property-decorator'
import searchForm from '~/components/common/searchForm.vue'
@Component({
    layout: 'institute',
    components: {searchForm},
    head () {
        return {
            title: '证书对接-平台建筑研究院'
        }
    }
})
export default class PageInstituteCertificate extends Vue {
    loading: boolean = false
    total: number = 0
    pageSize: number = 16
    pageNumber: number = 1
    classList: any = [
        {
            id: 1,
            name: '注册证'
        }, {
            id: 2,
            name: '监理工程师'
        }, {
            id: 3,
            name: '建造师'
        }, {
            id: 4,
            name: '房地产估价师'
        }, {
            id: 5,
            name: '造价工程师'
        }, {
            id: 6,
            name: '环境影响评价工程师'
        }, {
            id: 7,
            name: '职称证书'
        }, {
            id: 8,
            name: '八大员'
        }, {
            id: 9,
            name: '技工证'
        }, {
            id: 10,
            name: '其他证书'
        }
    ]
    classConf: any = {
        label: 'name',
        nodes: 'nodes',
        id: 'id'
    }
    sortInfo: any = [
        {
            label: '发布时间',
            value: 'publishDate'
        },
        {
            label: '截止时间',
            value: 'biddingDeadline'
        }
    ]
    list: any = [
        {
            title: '高价寻全国一级房建+市政双专',
            desc: '寻全国一级房建+市政建造师，初始转注不限，挂资质；高价寻一级市政，有证书的',
            money: 10000,
            city: '北京',
            company: '张三',
            day: 4,
            joinNum: 48,
            hours: 16
        },
        {
            title: '大型国企单位急聘一级房屋建造师',
            desc: '一级建造师',
            money: '面议',
            city: '北京',
            company: '张三',
            day: 3,
            joinNum: 20,
            hours: 19
        }
    ]
}
</script>

<style lang="scss" scoped>
    .certificate{
        .p20{
            padding: 20px;
        }

        padding: 20px 0;
        background: #f7f7f7;
        .cp-container{
            margin-bottom: 20px;
        }
        .bnr {
            width: 100%;
            height: 200px;
            background-color: $border;
            margin-bottom: 24px;
        }
        .pannel{
            margin-bottom: 20px;
            border: 1px solid #eee;
            color: #999;
            .cert-item{
                padding: 30px;
                &:hover{
                    box-shadow: 1px 5px 20px #e6e6e6;
                }
                .c-header{
                    color: #999;
                    font-size: 14px;
                    span{
                        flex: 1;
                        width: 100px;
                        &.join{
                            display: flex;
                            justify-content: flex-end;
                        }
                    }
                }
                .title {
                    margin-top: 20px;
                    margin-bottom: 10px;
                    font-size: 20px;
                    color: #333;
                }
                .desc{
                    display: flex;
                    font-size: 16px;
                    height: 42px;
                    align-items: center;
                }
                .price{
                    margin: 15px 0 20px;
                    font-size: 20px;
                    align-items: center;
                    color: #666;
                    .money{
                        font-size: 30px;
                        color: #f34649;
                    }
                }
                .btn-wrapper{
                    font-size: 18px;
                    div{
                        border-radius: 22px;
                        align-items: center;
                        justify-content: center;
                        height: 44px;
                    }
                    .consult{
                        width: 120px;
                        color: #11a9e8;
                        border: 1px solid #11a9e8;
                    }
                    .big-offer{
                        width: 180px;
                        background: #11a9e8;
                        color: #fff;
                    }
                }
            }
            .company{
                padding: 0 20px;
                height: 55px;
                align-items: center;
                background: #f3fbff;
                font-size: 18px;
            }
        }
    }

</style>
